﻿<UserControl x:Class="Desktop.VExpender"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        
        <Storyboard x:Name="sbCollapse">
            <DoubleAnimation Duration="0:0:0.3" To="15" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
            <DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border" d:IsOptimized="True"/>
            <DoubleAnimation Duration="0:0:0.3" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="path" d:IsOptimized="True"/>
        </Storyboard>
        <Storyboard x:Name="sbExpand">
            <DoubleAnimation Duration="0:0:0.3" To="{Binding ElementName=VExpender, Path=ActualWidth}" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
            <DoubleAnimation Duration="0:0:0.3" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border" d:IsOptimized="True"/>
            <DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="path" d:IsOptimized="True"/>
        </Storyboard>

        <LinearGradientBrush x:Key="VerticalGradient"  EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFB3D7F8" Offset="0"/>
            <GradientStop Color="#FFD5F3FA" Offset="1"/>
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="HoriziontalGradient"  EndPoint="1,0.5" StartPoint="0,0.5">
            <GradientStop Color="#FFB3D7F8" Offset="1"/>
            <GradientStop Color="#FFD5F3FA"/>
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="BorderBrush"  EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFE1F3FD" Offset="0"/>
            <GradientStop Color="#FF7691A1" Offset="1"/>
        </LinearGradientBrush>

    </UserControl.Resources>



    <Grid x:Name="LayoutRoot" >
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="MouseLeave">
                    <Storyboard>
                        <ColorAnimation Duration="0:0:0.2" To="#e9edf1"  Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rect" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <ColorAnimation Duration="0:0:0.2" To="LightGray" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rect" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Border Margin="0,0,0,0" x:Name="border" Opacity="1" Grid.Row="0" Grid.Column="1"  HorizontalAlignment="Stretch"  >
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFB3D7F8" Offset="0"/>
                    <GradientStop Color="#FFD5F3FA" Offset="1"/>
                </LinearGradientBrush>
            </Border.Background>
            <Border.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFE1F3FD" Offset="0"/>
                    <GradientStop Color="#FF7691A1" Offset="1"/>
                </LinearGradientBrush>
            </Border.BorderBrush>
        </Border>
        <Border Width="15" Height="45"  x:Name="borderArrow" Background="#cbe8fa"   Grid.Row="0" >


            <Border.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFE1F3FD" Offset="0"/>
                    <GradientStop Color="#FF7691A1" Offset="1"/>
                </LinearGradientBrush>
            </Border.BorderBrush>

            <Grid x:Name="grid"  MouseEnter="grid_MouseEnter"  MouseLeave="grid_MouseLeave" MouseLeftButtonUp="grid_MouseLeftButtonUp" >
                <Rectangle x:Name="rect" Fill="Transparent"   VerticalAlignment="Stretch"  RadiusX="4" RadiusY="4" HorizontalAlignment="Stretch"   Margin="3,3,3,3" >
                </Rectangle>
                <Path x:Name="path" Data="M4.5,0 L9,5 L-1.3088333E-09,5 z" Fill="#FF2E2F2D"  Height="4"  RenderTransformOrigin="0.5,0.5" Stretch="Fill" UseLayoutRounding="False" Width="8" >
                    <Path.RenderTransform>
                        <CompositeTransform Rotation="0"/>
                    </Path.RenderTransform>
                </Path>
            </Grid>

        </Border>

    </Grid>
</UserControl>
